import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { connect } from 'react-redux'
import { alertDispatch } from '@/utils'
import './Sub.less'
import ArrowLeftIcon from '@material-ui/icons/ArrowLeft';
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import { getSubApi, getSubAsideApi, setDefaultSubApi } from '@/Api'
import clsx from "clsx";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
const useStyles = makeStyles({
    list: {
        width: 200
    },
    fullList: {
        width: "auto"
    }
});
export default function Sub() {
    const history = useHistory()
    const [subArr, setSubArr] = useState([])
    const [subAsideArr, setSubAsideArr] = useState([])
    const [actionCode, setActionCode] = useState('')
    const [title, setTitle] = useState('')
    const [isSet, setIsSet] = useState(false)
    // 设置默认学科的蒙版
    const [open, setOpen] = useState(false);
    const classes = useStyles();
    const [state, setState] = useState({
        left: false
    });
    // 显示蒙版
    const handleClickOpen = () => {
        setOpen(true);
    };

    // 隐藏蒙版
    const handleClose = () => {
        setOpen(false);
    };

    useEffect(async () => {
        const { actionCode, title } = history.location.state
        setActionCode(actionCode)
        setTitle(title)
        const res = await getSubApi(actionCode)
        setSubArr(res.data)
        const res1 = await getSubAsideApi()
        setSubAsideArr(res1.data)
    }, [])
    // 切换学科
    async function changeSub(actionCode, title) {
        setActionCode(actionCode)
        const res = await getSubApi(actionCode)
        setSubArr(res.data)
        setTitle(title)
    }
    // 设置默认学科
    async function setDefaultSub(actionCode) {
        try{
            const res = await setDefaultSubApi(actionCode)
            history.push('/home')

        }catch(err){
            console.log(err);
        }
    }
    const toggleDrawer = (anchor, open) => (event) => {
        if (
            event.type === "keydown" &&
            (event.key === "Tab" || event.key === "Shift")
        ) {
            return;
        }

        setState({ ...state, [anchor]: open });
    };

    function isSetFn(bool,actionCode) {
        setIsSet(bool)
        if(bool){
            setDefaultSub(actionCode)
        }
        setOpen(false)
    }

    const list = (anchor) => (
        <div
            className={clsx(classes.list, {
                [classes.fullList]: anchor === "top" || anchor === "bottom"
            })}
            role="presentation"
            onClick={toggleDrawer(anchor, false)}
            onKeyDown={toggleDrawer(anchor, false)}
        >
            <List>
                {/* 左边遍历的数据 */}
                {subAsideArr.map((text, index) => (
                    <ListItem key={text.id}>
                        <Button id="asideBtn" className={['asideBtn', text.actionCode === actionCode ? 'curBtn' : ''].join(" ")} variant="outlined" onClick={() => changeSub(text.actionCode, text.title)}>{text.title}</Button>
                    </ListItem>
                ))}
            </List>
        </div >
    );
    return (
        <div className="Sub-Com">
            <div className="Sub-Title">
                <div className="Sub-title-top flex">
                    <div className="default-sub">默认学科 - <span>{title}</span></div>
                    <div className="change-default-sub flex" onClick={() => setOpen(true)}>
                        设置默认学科
                        <ArrowRightIcon />
                    </div></div>
                <div className="Sub-center flex" onClick={toggleDrawer('left', true)} >
                    {/* 左边 */}
                    <ArrowLeftIcon />
                    {/* 中间 */}
                    <h2>{title}</h2>
                    {/* 右边 */}
                    <ArrowRightIcon />
                </div>

            </div>
            <div className="professional-course">
                <h3>专业科目</h3>
                {subArr.map(item => {
                    return (
                        <div className="sub-item flex" key={item.id}>
                            <span>{item.title}</span>
                        </div>
                    )
                })}
            </div>
            {["left"].map((anchor) => (
                <React.Fragment key={anchor}>
                    <Drawer
                        anchor={anchor}
                        open={state[anchor]}
                        onClose={toggleDrawer(anchor, false)}
                    >
                        {list(anchor)}
                    </Drawer>
                </React.Fragment>
            ))}
            <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <div className="alert-set-sub flex">
                    <div className="alertTitle flex">
                        <p>
                        是否切换{title}为默认设置
                        </p>
                    </div>
                    <div className="selectSet flex">
                        <span onClick={() => isSetFn(false)} className="selectBtn selectBtn-quxiao">取消</span>
                        <span onClick={() => isSetFn(true,actionCode)} className="selectBtn selectBtn-sure">确定</span>
                    </div>
                </div>
            </Dialog>
        </div>
    )
}
